<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/axios.min.js"></script>
    <script>
        function $(id) {
            return document.getElementById(id)
        }
        window.onload = async function () {
            await axios.get("/country/findAll",null).then(resp =>{
                var countStr="";
                resp.data.forEach(e =>{
                    countStr += `<option value="${e.id}">${e.name}</option>`
                    $("countrySelect").innerHTML = countStr;
                });
            });
            chang();
        }
        function chang() {
            var paramObj = new URLSearchParams();
            //添加表单数据
            paramObj.append("countryId" , $("countrySelect").value);
            axios.post("/city/findByCountry",paramObj).then(resp =>{
                var cityStr="";
                resp.data.forEach(e=>{
                    cityStr += `<option>${e.name}</option>`
                    $("citySelect").innerHTML = cityStr;
                });
            });
        }
    </script>
</head>
<body>
    <select id="countrySelect" onchange="chang()"></select>
    <select id="citySelect"></select>
</body>
</html>